<template>
  <div class="specification">
    <view class="time-text">{{ timeText }}</view>
    <view class="tab-box">
      <i-tab
        :list="statusList"
        v-model="currentIndex"
        @change="onTab"
        size="28"
        :isScroll="statusList.length > 4"
      ></i-tab>
    </view>

    <!-- 钱包记录 -->
    <view class="scroll_body">
      <scroll-view
        scroll-y="true"
        class="scroll_body"
        @scrolltolower="reachBottom"
      >
        <view
          class="wallet-list"
          v-for="(item, index) in walletLog"
          :key="index"
        >
          <view class="titles">
            <view class="fs-bold">
              {{ item.accountTrend }}
            </view>
            <text>{{ item.amountType }}</text>
          </view>
          <view class="titles" style="margin: 18rpx 0">
            <view style="color: #666; font-size: 26rpx;">
              {{ item.businessType }}
            </view>
            <view
              :style="{ color: item.accountTrend === '赚取' ? 'red' : 'green' }"
              class="fs-bold"
            >
              <text>{{ item.accountTrend === "赚取" ? "+" : "-" }}</text>
              {{ item.amount }}
            </view>
          </view>

          <view class="list-content">
            <view class="title-box u-flex u-row-between">
              <text class="title u-ellipsis-1"
                >{{ item.type_name
                }}{{ item.title ? "-" + item.title : "" }}</text
              >
              <view class="money">
                <text v-if="item.wallet >= 0" class="add font-OPPOSANS"
                  >+{{ item.wallet }}</text
                >
                <text v-else class="minus font-OPPOSANS">{{
                  item.wallet
                }}</text>
              </view>
            </view>
          </view>
          <view
            style="
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <view class="time">{{ item.createTime }}</view>
            <view class="time"
              >累计金额：
              <text style="color: red"
                >{{ item.beforeAmount || 0 }} 元</text
              ></view
            >
          </view>
        </view>

        <!-- 空置页 -->
        <!-- <shopro-empty
          v-if="isEmpty"
          marginTop="200rpx"
          :image="$IMG_URL + '/imgs/empty/no_data.png'"
          tipText="暂无数据~"
        >
        </shopro-empty> -->
        <i-notData v-if="isEmpty" />
        <!-- 更多 -->
        <i-more
          v-if="!isEmpty"
          height="80rpx" 
          :status="loadStatus"
          icon-type="flower"
          color="#ccc"
        />
      </scroll-view>
    </view>
  </div>
</template>

<script setup lang="ts">
import { onLoad, } from '@dcloudio/uni-app';
import { ref, reactive, watch } from 'vue';
import { formatDate } from "../../utils/common";
import { getAccountChangeList } from "../../api";
import {
  equipmentSalesList,
  WithdrawablePriceList,
  channelAgentList,
} from "./helps.ts";

// 类型定义
interface FormData {
  ypageNum: number;
  amountType: string;
  total: number;
  startTime: string;
  endTime: string;
  amountTypes: number[] | null;
  businessTypes?: number[] | null;
}

interface WalletItem {
  accountTrend: string;
  amountType: string;
  businessType: string;
  amount: number;
  type_name: string;
  title?: string;
  wallet: number;
  createTime: string;
  beforeAmount: number;
}

interface StatusItem {
  name: string;
  typeCode: number | string;
  amountTypes: number[] | null;
  businessTypes?: number[] | null;
}

// 响应式数据
const timeText = ref("");
const statusList = ref<StatusItem[]>([]);
const walletLog = ref<WalletItem[]>([]);
const currentIndex = ref(0);
const isEmpty = ref(false);
const loadStatus = ref<'loadmore' | 'loading' | 'nomore'>('loadmore');

const formData = reactive<FormData>({
  ypageNum: 1,
  amountType: "",
  total: 0,
  startTime: "",
  endTime: "",
  amountTypes: null,
});

// 方法
const setAmount = (item: WalletItem) => {
  const threshold = new Date("2025-03-31 23:59:59");
  if (new Date(item.createTime).getTime() <= threshold.getTime()) {
    return (item.amount / 0.2).toFixed(2);
  } else {
    return (item.amount / 0.3).toFixed(2);
  }
};

const checkBusinessType = (item: WalletItem) => {
  const businessTypes = statusList.value[currentIndex.value].businessTypes;
  const amountTypes = statusList.value[currentIndex.value].amountTypes;
  return (
    (businessTypes && businessTypes.includes(9)) ||
    (amountTypes && amountTypes.includes(4))
  );
};

const onTab = (index: number) => {
  currentIndex.value = index;
  formData.businessTypes = statusList.value[index].businessTypes || null;
  formData.amountTypes = statusList.value[index].amountTypes;
  walletLog.value = [];
  formData.ypageNum = 1;
  getWalletLog();
};

// 钱包明细
const getWalletLog = () => {
  loadStatus.value = "loading";
  uni.showLoading({
    title: "加载中...",
    mask: true,
  });
  
  const params: any = { ...formData };
  delete params.amountType;

  getAccountChangeList(params)
    .then((res: any) => {
      if (res.code === 200) {
        walletLog.value = [...walletLog.value, ...res.rows];
        isEmpty.value = !walletLog.value.length;
        formData.total = res.total;
        loadStatus.value =
          walletLog.value.length < formData.total
            ? "loadmore"
            : "nomore";
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

// 触底加载更多
const reachBottom = () => {
  if (walletLog.value.length < formData.total) {
    formData.ypageNum += 1;
    getWalletLog();
  }
};

// 生命周期
onLoad((options: any) => {
  timeText.value =
    formatDate(options.startDate, "YYYY-MM-DD") +
    " - " +
    formatDate(options.endDate, "YYYY-MM-DD");
    
  switch (options.cardType) {
    case "0":
      statusList.value = equipmentSalesList;
      break;
    case "1":
      statusList.value = WithdrawablePriceList;
      break;
    case "2":
      statusList.value = channelAgentList;
      break;
    default:
      statusList.value = equipmentSalesList;
      break;
  }

  statusList.value.forEach((item) => {
    item.title = item.name;
  });
  
  formData.amountType = options.amountType;
  const targetStatus = statusList.value.find(
    (item) => item.typeCode == options.amountType
  );
  
  formData.amountTypes = targetStatus?.amountTypes || null;
  formData.startTime = options.startDate;
  formData.endTime = options.endDate;
  formData.businessTypes = targetStatus?.businessTypes || null;
  
  currentIndex.value =
    statusList.value.findIndex(
      (item) => item.typeCode == options.amountType
    ) || 0;
    
  getWalletLog();
});

</script>

<style lang="scss" scoped>
// 钱包记录
.specification {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.time-text {
  font-size: 28rpx;
  color: #333;
  padding: 24rpx 0;
  font-weight: bold;
  background-color: #fff;
  text-align: center;
}
.wallet-list {
  @include card;
  @include flexC;
  padding: 24rpx;
  margin-top: 24rpx;
  box-sizing: border-box;
  border-radius: 24rpx;

  .head-img {
    width: 70rpx;
    height: 70rpx;
    border-radius: 50%;
    background: #ccc;
  }

  .list-content {
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;

    .title {
      font-size: 28rpx;
      color: #333;
      width: 400rpx;
    }
  }
  .time {
    color: #c0c0c0;
    font-size: 22rpx;
  }
  .money {
    font-size: 28rpx;
    font-weight: bold;

    .add {
      color: #7063d2;
    }

    .minus {
      color: #333333;
    }
  }
}

.scroll {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #fff;
  justify-content: space-between;
}
// 分类
.state-item {
  height: 100%;
  display: inline-block;
  margin: 0 24rpx;
  text-align: center;
  background-color: #fff;

  .state-title {
    color: #666;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 90rpx;
  }

  .title-active {
    color: #333;
  }

  .underline {
    display: block;
    width: 100%;
    height: 4rpx;
    background: #fff;
    border-radius: 2rpx;
  }

  .underline-active {
    background: #5e49c3;
    display: block;
    height: 4rpx;
    border-radius: 2rpx;
  }
}

.scroll_body {
  flex: 1;
  height: calc(100vh - 280rpx);
  .titles {
    width: 100%;
    @include flexRS;
  }
}
</style>
